<template>
  <div id="app">
      <!-- 头部组件 -->
      <c-head v-bind:seller="seller"></c-head>
      <!-- 路由 -->
      <div class="uio">
        <router-link to="/"  class="f1">商品</router-link>
        <router-link to="/evaluate"  class="f1">评价</router-link>
        <router-link to="/biz"  class="f1">商家</router-link>
      </div>
      
      <!-- 路由渲染 -->
      <router-view :seller="seller" :goods="goods" :ratings="ratings"></router-view>

  </div>
</template>

<script>
  //导入组件
  import head from './components/head/head.vue'
  
  import axios from 'axios' 
 
  // 暴露实例的选项对象
  export default {
    data:function(){
      return {
        seller:{},
        goods:[],
        ratings:[]
      }
    },
    components: {
      "c-head":head,
    },
    mounted(){
      axios.get("mock/data.json").then(response=>{
        this.seller=response.data.seller
        this.goods=response.data.goods
        this.ratings=response.data.ratings
        // console.log(this.seller)
      })
    }
  }

</script>
   
<style>
  .uio{
    overflow: hidden;  
  }
  .f1{
    display: block;
    float: left;
    font-size: 1.4rem;
    color: rgb(77,85,93);
    line-height: 4rem;
    width: 12.5rem;
    height: 4rem;
    text-align: center;
  }
   
</style>
